<template>
    <div class="charts">
        <v-chart :option="getOptions()"></v-chart>
    </div>
</template>
  
<script setup lang="ts">
//图形图标的配置项
const getOptions = () => {
    return {
        xAxis: {
            show: false,
            //设置最大数值
            max: 100,
            //设置最小数值
            min: 0,
        },
        yAxis: {
            //均分
            type: "category",
            show: false,
        },
        series: {
            type: "bar",
            data: [33],
            //柱状图的宽度
            barWidth: 10,
            //背景颜色
            backgroundStyle: {
                color: '#ccc'
            },
            //柱条的颜色
            showBackground: true,//设置柱条的背景颜色，需要变为真
            itemStyle: {
                color: 'yellowgreen'
            },
            //显示数值的标签
            label: {
                show: true,
                //文字位置
                position: 'right',
                //自定义数值
                formatter: '|',
                color: 'yellowgreen'
            }
        },
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
    };
};
</script>
  
<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>